<template>
  <!-- <el-card>
        <el-form :inline="true">
           <el-form-item label="一级分类">
              <el-select style="width:200px">
                  <el-option label="背景"></el-option>
                  <el-option label="背景"></el-option>
                  <el-option label="背景"></el-option>

              </el-select>
           </el-form-item>
           <el-form-item label="二级分类">
              <el-select style="width:200px">
                  <el-option label="背景"></el-option>
                  <el-option label="背景"></el-option>
                  <el-option label="背景"></el-option>

              </el-select>
           </el-form-item>
           <el-form-item label="三级分类">
              <el-select style="width:200px">
                  <el-option label="背景"></el-option>
                  <el-option label="背景"></el-option>
                  <el-option label="背景"></el-option>

              </el-select>
           </el-form-item>
        </el-form>
    </el-card>  -->
  <!-- 三级分类全局组件 -->
  <Category />
  <el-card style="margin: 10px 0px">
    <el-button
      type="primary"
      szie="default"
      icon="Plus"
      :disabled="categoryStore.C3Id ? false : true"
    >
      添加属性
    </el-button>
    <el-table border style="margin: 10px 0px" :data="attrArr">
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="80px"
      ></el-table-column>
      <el-table-column label="属性名称"  prop="attrName" width="120px"></el-table-column>
      <el-table-column label="属性值名称">
        <template #="{row,$index}">
          <el-tag  style="margin:5px;" v-for="(item,index) in row.attrValueList" :key="item.id">{{item.valueName}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120px">
        <template #="{row,$index}">
          <el-button type="primary" size="small" icon="Edit"></el-button>
          <el-button type="primary" size="small" icon="Delete"></el-button>
        </template>
      </el-table-column> 
    </el-table>
  </el-card>
</template>

<script setup lang="ts">


import {watch,ref} from "vue";
// 引入获取已有属性与属性值接口
import {reqAttr} from "@/api/product/attr";
import { AttrResponseData } from "@/api/product/attr/type";
// 获取分类的仓库
import useCategoryStore from '@/store/modules/category';

let categoryStore = useCategoryStore()
//  存储已有的属性与属性值
let attrArr = ref<Attr[]>([])
// 监听三级分类ID变化的
watch(()=>categoryStore.C3Id,()=>{
  // 清空上一次查询的属性与属性值
  attrArr.value = []

  // 保证三级分类得有才发送请求
  if(!categoryStore.C3Id) return
  // console.log(123)
  // 获取分类的ID            
  getAttr();
})

// 获取已有属性的与属性值的方法
const  getAttr = async () =>{
  const {C1Id,C2Id,C3Id} = categoryStore;
  // 获取分类下已有的属性与属性值
   const result:AttrResponseData = await reqAttr(C1Id,C2Id,C3Id);
   console.log(result)
  if(result.code = 200 ){
    attrArr.value = result.data;
  }
}

</script>

<style lang="sass" scoped></style>
